<template>
	<view class="">
		<view class="item-con">
			<view class="item" v-for="(item, index) in list" :key="index"
				@click.stop="handleClick(item)">
				<template v-if="item.field2 == 1">
					<view class="item-top">
						<view class="item-title items-center">
							<image style="width: 34rpx;height: 27rpx;margin-right: 20rpx;" src="../../static/img/cart-icon-2.png" mode=""></image>
							<view>{{item.name}}</view>
						</view>
						<view class="flex-row items-center justify-between">
							<view class="">
								<view class="item-d">
									<text v-for="(v,k) in item.lable" :key="k">{{v.content}}</text>
								</view>
								<view style="padding: 10rpx 0;">
									<text class="item-price">{{item.price}}</text>
									<text class="item-u">起元/度</text>
								</view>
							</view>
							<view class="flex-col items-center justify-center" @click.stop="openMap(item)">
								<image src="/static/img/daohang.png" mode="" class="icon"></image>
								<text class="bottom-text" style="margin-top: 10rpx;" v-if="item.distance">{{item.distance}}km</text>
							</view>
						</view>
					</view>
					<view class="item-bottom-tram">
						<view class="">
							<text class="bottom-text" style="margin-left: 0;color: #446CB2;" v-if="item.unused">空闲{{item.unused}}/</text>
							<text class="bottom-text">共{{item.canUse}}</text>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="item-top">
						<view class="item-title items-center">
							<image style="width: 34rpx;height: 27rpx;margin-right: 20rpx;" src="../../static/img/cart-icon.png" mode=""></image>
							<view>{{item.name}}</view>
						</view>
						<view class="flex-row items-center justify-between">
							<view class="" style="max-width: 78%;">
								<view class="item-d">
									<text v-for="(v,k) in item.lable" :key="k">{{v.content}}</text>
								</view>
								<view style="padding: 10rpx 0;">
									<text class="item-price">{{item.price}}</text>
									<text class="item-u">起元/度</text>
								</view>
								<view class="flex-row items-center">
									<image src="/static/img/tc.png" mode="" class="p-icon"></image>
									<text class="item-c">{{item.parkingInfo}}</text>
								</view>
							</view>
							<view class="flex-col items-center justify-center" @click.stop="openMap(item)">
								<image src="/static/img/daohang.png" mode="" class="icon"></image>
								<text class="bottom-text" style="margin-top: 10rpx;"
									v-if="item.distance">{{item.distance}}km</text>
							</view>
						</view>
					</view>
					<view class="item-bottom flex-row items-center justify-between">
						<view class="flex-row items-center" v-if="item.canUse">
							<view class="btn one">快</view>
							<view>
								<text class="bottom-text" v-if="item.unused">空闲{{item.unused}}/</text>
								<text class="bottom-text">共{{item.canUse}}</text>
							</view>
						</view>
						<view class="flex-row items-center" v-if="item.canUseSlowly">
							<view class="btn two">慢</view>
							<view>
								<text class="bottom-text" v-if="item.unusedSlowly">空闲{{item.unusedSlowly}}/</text> 
								<text class="bottom-text">共{{item.canUseSlowly}}</text>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods:{
			handleClick(item){
				if(item.field2 && item.field2 == 1) return
				this.navTo(`/pages/tabs/details?id=${item.id}`,{login:true})
			}
		}
	};
</script>
<style scoped lang="scss">
	.item {
		// height: 325rpx;
		background: #ffffff;
		border: 1rpx solid rgba(218, 218, 218, 0.18);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.item-top {
		padding: 30rpx;
	}

	.item-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}

	.item-d {
		font-size: 20rpx;
		font-weight: 500;
		color: #a9a9a9;
	}

	.item-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #fe642b;
	}

	.p-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.item-c {
		max-width: 90%;
		display: block;
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
		word-break: break-all;
	}

	.item-u {
		font-size: 22rpx;
		color: #333333;
		font-weight: 500;
		margin-left: 10rpx;
	}

	.item-bottom {
		height: 86rpx;
		background: #eff8ff;
		border-radius: 0px 0px 20rpx 20rpx;
		padding: 0 30rpx;
	}
	
	.item-bottom-tram{
		background-color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 0px 0px 20rpx 20rpx;
	}

	.btn {
		width: 89rpx;
		height: 48rpx;
		text-align: center;
		border-radius: 24px;
		line-height: 48rpx;
		font-size: 26rpx;
		font-weight: 500;
	}

	.one {
		background: $uni-color-bg;
		color: #FFF;
	}

	.two {
		background: #246697;
		color: #ffffff;
	}

	.bottom-text {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-left: 24rpx;
	}

	.icon {
		width: 58rpx;
		height: 58rpx;
	}
</style>